<template>
  <div>
    <el-card>
      <div slot="header">
        <span>我的云N记</span>
      </div>
      <el-empty v-if="!myArticle" description="空空如也！" style="height: 615px;"></el-empty>
      <div v-else v-for="item in this.myArticle" :key="item.content.article_id" class="text item">
        <div class="cloudN-center-content-text">
          <i class="el-icon-time"></i>
          <span class="cloudN-center-content-time">{{ item.creat_time }}</span>
        </div>
        <a href="">
          <div class="cloudN-content-head">{{ item.content.title }}</div>
          <div class="cloudN-center-content-text">{{ item.content.part_content }}</div>
        </a>
        <!--文章底部操作区域-->
        <div class="cloudN-content-tag-operators" :class="{ active: item.content.custom_tag !== null }">
          <!--标签区域-->
          <div class="cloudN-tag" v-show="item.content.custom_tag !== null">
            <el-tag class="customLabel" type="info" size="mini" v-for="(tag,index) in item.content.custom_tag"
                    :key="index">{{ tag }}
            </el-tag>
          </div>
          <!--显示观看人数，点赞人数，评论人数区域-->
          <div class="operators">
            <div>
              <font-awesome-icon :icon="['far', 'eye']" style="width:16px;height: 16px"></font-awesome-icon>
              <span>{{ item.article_opeartor.view_count }}</span></div>
            <div>
              <font-awesome-icon @click="goComment('/essay/content' + '?articleid=' + item.content.article_id)" :icon="['far', 'comment-dots']" style="width:16px;height: 16px"></font-awesome-icon>
              <span>{{ item.article_opeartor.comment_count }}</span></div>
            <div>
              <font-awesome-icon v-if="!item.article_opeartor.isLike" @click="like(item.content.article_id)" :icon="['far', 'thumbs-up']" style="width:16px;height: 16px"></font-awesome-icon>
              <font-awesome-icon v-else @click="like(item.content.article_id)" :icon="['far', 'thumbs-up']" style="width:16px;height: 16px;color: #00c3ff"></font-awesome-icon>
              <span>{{ item.article_opeartor.fabulous_count }}</span></div>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      myArticle: []
    }
  },
  created () {
    this.getMycloudNoteN()
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    async getMycloudNoteN () {
      const url = this.$config.urls.get('load_local_user_cloudNoteN_list')
      const { data: res } = await this.$http.post(url)
      if (res.code !== 0) {
        this.$message.error('用户未登录！')
        // console.log(res)
      } else {
        res.data.forEach(item => {
          // 将字符串类型的数据转换成数组形如: "abc def" -> [abc,def]
          if (item.content.custom_tag) {
            item.content.custom_tag = item.content.custom_tag.split(' ')
          }
          item.creat_time = this.$date.diffTime(item.creat_time)
        })
        this.myArticle = res.data
        // console.log(res.data)
      }
    }
  },
  computed: {},
  name: 'userArticle'
}
</script>

<style lang="less" scoped>

.operators {
  display: flex;
  color: #999999;
  div {
    margin: 0 5px
  }
  span {
    margin-left: 5px;
  }
}

.customLabel {
  margin-left: 5px;
  background-color: #f5f5f5;
  font-size: 13px;
  color: #999999;
}
</style>
